<div class="content__title">
    <h1>
        Grid Masonry
        <small>Pure CSS and mobile first with a fallback to inline grid, Supported from IE10,
            <a href="//caniuse.com/#feat=multicolumn"
               target="_blank">browser compatibility</a>
        </small>
    </h1>
</div>
<div class="row-masonry row-masonry-xl-8 row-masonry-lg-5 row-masonry-md-4 row-masonry-sm-3 row-masonry-xs-2">
    <div class="col-masonry">
        <div class="box-placeholder">
            <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
            <p>Ipsum do ullamco laboris excepteur. Do incididunt commodo adipisicing officia sunt tempor. Deserunt
                exercitation proident
                enim veniam laboris fugiat ipsum veniam dolore duis sit duis. In deserunt ut nulla ad eu.</p>
        </div>
    </div>
    <div class="col-masonry">
        <div class="box-placeholder">
            <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
            <p>Veniam non sunt quis ex consequat ea esse duis esse. Ut incididunt eiusmod occaecat esse aute adipisicing
                culpa. Voluptate
                ullamco labore laboris et do in.</p>
        </div>
    </div>
    <div class="col-masonry">
        <div class="box-placeholder">
            <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
            <p>Esse elit et aute do aliqua ipsum cillum consectetur deserunt deserunt cupidatat aute aliqua aute.
                Aliquip ad incididunt
                dolor cupidatat quis officia cillum sit ex. Irure ut sit Lorem sunt nulla excepteur ipsum ipsum dolore
                cillum cupidatat
                ipsum. Do amet aliquip sunt consectetur nulla. Cupidatat ad consectetur veniam aliqua non ullamco
                laboris eiusmod.
                In voluptate officia aliquip dolore sit qui consectetur fugiat aliqua duis occaecat. Non mollit elit
                nisi ea mollit
                anim excepteur ut qui exercitation.</p>
        </div>
    </div>
    <div class="col-masonry">
        <div class="box-placeholder">
            <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
            <p>Ullamco incididunt do deserunt cillum veniam cillum amet ad. Deserunt laborum cupidatat mollit proident
                adipisicing
                in culpa consequat adipisicing et non. Aliqua ea elit voluptate esse aliqua dolor ipsum. Ut officia
                officia fugiat
                sint esse qui incididunt Lorem occaecat.</p>
        </div>
    </div>
    <div class="col-masonry">
        <div class="box-placeholder">
            <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
            <p>Ea non irure qui fugiat aliquip esse adipisicing. Cillum aliquip dolor non fugiat ad aliqua. In voluptate
                et non irure
                elit. Tempor qui sunt incididunt amet tempor sint et voluptate sunt qui sit culpa proident ipsum. Sunt
                duis pariatur
                officia ut magna pariatur fugiat dolor cillum laboris eu. Qui incididunt minim nostrud exercitation
                aliquip.</p>
        </div>
    </div>
    <div class="col-masonry">
        <div class="box-placeholder">
            <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
            <p>Fugiat commodo ad consectetur reprehenderit. Officia fugiat ea proident exercitation occaecat mollit
                laboris fugiat
                consequat deserunt anim ipsum magna ex. Esse do amet cillum aute ut ea.</p>
        </div>
    </div>
    <div class="col-masonry">
        <div class="box-placeholder">
            <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
            <p>Magna id fugiat laborum elit ullamco deserunt do laboris non qui. Duis et exercitation nulla labore
                cupidatat nostrud
                pariatur reprehenderit in nostrud. Consequat consequat consectetur mollit adipisicing. Laborum amet sit
                sint aliquip
                fugiat adipisicing enim reprehenderit. Voluptate nisi reprehenderit voluptate sit enim aute deserunt
                cupidatat et
                dolore labore voluptate id dolore.</p>
        </div>
    </div>
    <div class="col-masonry">
        <div class="box-placeholder">
            <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
            <p>Reprehenderit non ullamco quis non excepteur irure excepteur anim ullamco labore. Sit occaecat
                consectetur laborum
                consequat elit sint sit sunt. Duis aliquip magna ipsum consequat eiusmod officia.</p>
        </div>
    </div>
    <div class="col-masonry">
        <div class="box-placeholder">
            <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
            <p>Magna nostrud ex cupidatat id in non labore ad voluptate est irure tempor. Nostrud aliqua magna laborum
                incididunt
                deserunt veniam nulla nulla labore cillum. Id laboris Lorem dolore minim reprehenderit eu proident
                aliqua magna id
                aute aute. Aliqua est et nulla eu duis id laborum magna.</p>
        </div>
    </div>
    <div class="col-masonry">
        <div class="box-placeholder">
            <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
            <p>Sint pariatur eiusmod id sit est exercitation laboris mollit pariatur minim. Ex aliquip commodo nulla
                reprehenderit
                et laboris consequat pariatur culpa culpa proident ullamco laboris. Ex aliquip deserunt labore aliquip
                ea est sit
                quis amet tempor sunt amet. Id reprehenderit do elit sit consectetur. Aute amet sint tempor ipsum sint
                laboris est
                do culpa tempor. Pariatur fugiat aute officia et laboris voluptate sit nisi in anim excepteur amet
                eu.</p>
        </div>
    </div>
    <div class="col-masonry">
        <div class="box-placeholder">
            <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
            <p>Incididunt ut eu fugiat do deserunt voluptate id et est aliqua eu sint. Ad dolore excepteur ipsum nulla
                proident dolore
                aute sunt. Aute enim do dolor laborum id eiusmod sit.</p>
        </div>
    </div>
    <div class="col-masonry">
        <div class="box-placeholder">
            <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
            <p>Amet elit et ad amet nulla minim deserunt mollit adipisicing. Laboris non ipsum ad laborum non magna
                velit tempor cillum
                cillum. Proident dolore eiusmod ex elit cillum. Cupidatat duis pariatur ut id deserunt laboris. Culpa
                excepteur est
                deserunt eiusmod do do ut est labore eiusmod. Eu eu veniam excepteur mollit anim est velit nisi. Velit
                quis tempor
                laboris culpa.</p>
        </div>
    </div>
    <div class="col-masonry">
        <div class="box-placeholder">
            <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
            <p>Nostrud nulla nisi laboris officia anim nostrud nulla cupidatat veniam ea duis. Pariatur ea ullamco irure
                laborum.
                Consectetur labore in occaecat ullamco est fugiat nisi sunt deserunt. Non sunt dolor elit culpa dolore
                adipisicing.
                Fugiat mollit ex voluptate nulla deserunt dolore ea sunt commodo et qui laborum.</p>
        </div>
    </div>
    <div class="col-masonry">
        <div class="box-placeholder">
            <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
            <p>Quis pariatur ea nisi excepteur mollit nulla reprehenderit labore. Exercitation pariatur eu pariatur
                tempor deserunt
                ad occaecat ad in pariatur id et dolore. Enim veniam aute magna fugiat eiusmod velit quis. Laborum sit
                consequat
                dolore qui minim culpa aliqua pariatur cillum velit. Nostrud enim aliqua ut nisi consectetur pariatur
                fugiat do esse
                fugiat enim et tempor ad. Eiusmod ut incididunt proident labore sint sit culpa excepteur id. Fugiat
                mollit qui eu
                eu fugiat proident.</p>
        </div>
    </div>
    <div class="col-masonry">
        <div class="box-placeholder">
            <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
            <p>Tempor do officia magna do sunt. Nulla cillum anim excepteur adipisicing commodo culpa. Adipisicing
                pariatur qui voluptate
                consectetur mollit quis sunt enim veniam ullamco. Duis nostrud anim aliqua adipisicing fugiat aute
                excepteur deserunt
                enim occaecat pariatur ad. Qui aliquip aute labore minim ipsum in aute et. Aliqua laboris magna aute
                incididunt esse
                ex. Eu ipsum occaecat aliquip enim aute.</p>
        </div>
    </div>
    <div class="col-masonry">
        <div class="box-placeholder">
            <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
            <p>Labore cillum id non anim eiusmod officia. Nostrud laboris sint aliquip cillum magna. Minim sit labore
                proident culpa
                non nisi cillum non officia est. Proident elit sit adipisicing est cupidatat ex cupidatat labore aliqua
                ad.
            </p>
        </div>
    </div>
    <div class="col-masonry">
        <div class="box-placeholder">
            <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
            <p>Officia tempor ea adipisicing ad sit qui dolore consequat irure veniam. Est sit magna deserunt sint aute
                commodo fugiat
                fugiat irure sint dolore commodo amet. Duis cillum dolor quis consectetur dolor et et culpa id elit.
                Amet ut nulla
                sunt non in non duis sit fugiat consequat. Velit incididunt ullamco sunt deserunt nulla ad adipisicing.
                In fugiat
                ullamco deserunt amet. Ex voluptate amet magna minim ut incididunt veniam.</p>
        </div>
    </div>
    <div class="col-masonry">
        <div class="box-placeholder">
            <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
            <p>Occaecat anim do cillum est dolore sint. Do ut proident exercitation est incididunt irure duis ea laborum
                minim cillum
                est. Mollit irure non qui veniam labore eu elit veniam ea amet nisi esse labore. Elit ut nulla
                exercitation fugiat
                cupidatat non cupidatat sint id minim.</p>
        </div>
    </div>
    <div class="col-masonry">
        <div class="box-placeholder">
            <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
            <p>Voluptate incididunt tempor nulla voluptate esse dolor Lorem veniam voluptate adipisicing laborum in
                aliqua. Proident
                voluptate exercitation mollit consectetur qui commodo minim. Ea esse veniam velit minim reprehenderit
                incididunt
                reprehenderit do laborum aliqua. In quis et excepteur cupidatat qui duis. Pariatur Lorem laborum ut
                consectetur deserunt
                consectetur officia tempor commodo aliqua aliqua ipsum.</p>
        </div>
    </div>
    <div class="col-masonry">
        <div class="box-placeholder">
            <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
            <p>Ullamco officia esse ex reprehenderit reprehenderit cupidatat. Sunt excepteur sint consectetur ex aliqua
                excepteur.
                Laborum id cupidatat ea reprehenderit sit eiusmod ad exercitation ullamco nostrud. Nulla tempor
                voluptate magna amet
                culpa exercitation ad laborum in. Aliqua voluptate deserunt pariatur excepteur. Ullamco voluptate est
                dolore velit
                aliquip tempor nostrud deserunt. Minim excepteur dolor nulla commodo incididunt ex ullamco excepteur
                cillum veniam
                quis reprehenderit.</p>
        </div>
    </div>
</div>
<h3 class="my-md">Masonry with any kind of element</h3>
<div class="row-masonry row-masonry-xl-8 row-masonry-lg-5 row-masonry-md-4 row-masonry-sm-3 row-masonry-xs-2">
    <div class="col-masonry">
        <img src="assets/tmp/img/bg1.jpg" alt=""/>
    </div>
    <div class="col-masonry">
        <div class="box-placeholder">
            <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
            <p>Proident est cillum magna qui pariatur. Deserunt ut voluptate sint aliquip anim nisi consequat. Elit
                laboris anim anim
                dolor incididunt. Nostrud qui labore qui cillum excepteur mollit excepteur consequat esse anim enim ad
                enim. Esse
                qui mollit et minim mollit laboris reprehenderit laborum fugiat do id. Mollit labore proident cupidatat
                aliqua dolore
                exercitation consectetur commodo sint mollit nostrud esse sunt. Nostrud fugiat duis sit excepteur
                excepteur mollit.</p>
        </div>
    </div>
    <div class="col-masonry">
        <img src="assets/tmp/img/bg2.jpg" alt=""/>
    </div>
    <div class="col-masonry">
        <img src="assets/tmp/img/bg3.jpg" alt=""/>
    </div>
    <div class="col-masonry">
        <img src="assets/tmp/img/bg4.jpg" alt=""/>
    </div>
    <div class="col-masonry">
        <img src="assets/tmp/img/bg5.jpg" alt=""/>
    </div>
    <div class="col-masonry">
        <img src="assets/tmp/img/bg6.jpg" alt=""/>
    </div>
    <div class="col-masonry">
        <div class="box-placeholder">
            <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
            <p>Dolore consequat elit est qui dolore dolore tempor amet magna adipisicing non in commodo. Veniam sint et
                proident duis
                eu nulla commodo sunt duis aliquip eiusmod. Occaecat incididunt deserunt consectetur non aliquip velit
                ullamco eu
                sit labore proident exercitation. Cillum deserunt voluptate eu eiusmod sint in esse. Velit anim non
                Lorem proident
                eu sit nisi Lorem aute do sit ea. Esse nostrud amet excepteur occaecat incididunt amet laborum aliqua
                qui mollit
                ullamco. Labore incididunt ullamco non ipsum Lorem duis commodo adipisicing in.</p>
        </div>
    </div>
    <div class="col-masonry">
        <div class="box-placeholder">
            <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
            <p>Amet est dolor id esse veniam duis eu ex velit. Id qui deserunt voluptate veniam. Voluptate ea ipsum in
                eiusmod enim
                do velit commodo nulla sint. Fugiat ipsum esse pariatur voluptate exercitation magna ut proident
                consectetur et.
                Sint qui elit exercitation anim duis nulla commodo aliqua excepteur pariatur.</p>
        </div>
    </div>
    <div class="col-masonry">
        <img src="assets/tmp/img/bg7.jpg" alt=""/>
    </div>
    <div class="col-masonry">
        <img src="assets/tmp/img/bg8.jpg" alt=""/>
    </div>
    <div class="col-masonry">
        <div class="box-placeholder">
            <h2 class="text-grey text-md mb-sm">Masonry Item</h2>
            <p>Culpa amet adipisicing consequat nisi dolore sunt amet labore officia aliquip elit tempor officia aliqua.
                Deserunt
                laborum enim ut laboris duis. Cillum non proident dolor ullamco cillum nostrud in sint aliqua cillum.
                Proident magna
                incididunt occaecat eiusmod cillum dolor tempor Lorem adipisicing nisi adipisicing mollit ex
                exercitation. Magna
                nostrud est sunt incididunt culpa. Duis nulla elit ut ea adipisicing duis esse ullamco.</p>
        </div>
    </div>
    <div class="col-masonry">
        <img src="assets/tmp/img/bg9.jpg" alt=""/>
    </div>
    <div class="col-masonry">
        <img src="assets/tmp/img/bg10.jpg" alt=""/>
    </div>
</div>
